<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		body{
			height: 1500px;
		}
			.centerMe{
				text-transform:uppercase;
				height:200px;
				display:flex;
				align-items:center;
				justify-content:center;
				border: 1px solid #FF0000;
			}
			.menuWrap{
				background: indigo;
				font-family: "微软雅黑";
				font-size: 1rem;
				min-height: 2.75rem;
				display: flex;
				align-items: center;
				flex-direction: column;
				padding: 0 1rem;
				
			}
			@media only screen and (min-width:31.25rem ) {
				.menuWrap{
					flex-direction: row;
				}
			}
			
			.listItem,.lastItem{
				color: #EBEBEB;
				text-decoration: none;
			}
			@media only screen and (min-width:31.25rem ) {
				.listItem{
					margin-right: 1rem;
				}
				.lastItem{
					margin-left: auto;
				}
			}
			.FlexWrapper{
				background: indigo;
				display: flex;
				width: 400px;
				height: 200px;
			}
			.FlexInner{
				display: flex;
				background: #34005B;
				height: 100px;
				width: 200px;
			}
			.AlignSelf{
				align-self: flex-end;
				color: #FFF9F3;
			}
		</style>
	</head>
	<body>
		<div class="centerMe">
			Hello,I am centered with flexbox;
		</div>
		
		<div class="menuWrap">
			<a href="#" class="listItem">Home</a>
			<a href="#" class="listItem">About</a>
			<a href="#" class="listItem">Products</a>
			<a href="#" class="listItem">Policy</a>
			<a href="#" class="lastItem">Contact Us</a>
			
		</div>
		
		<div class="FlexWrapper">
			<div class="FlexInner">
				<div class="AlignSelf">I am</div>
			</div>
			<div class="FlexInner">
				<div class="AlignSelf">I am</div></div>
			<div class="FlexInner">
				<div class="AlignSelf">I am </div></div>
		</div>
		
		
		
	</body>
</html>
